<template>
  <section id="case-apply-page">
     <sub-title subname="活动申请" subicon='../../../static/img/titlt.png'></sub-title>
     <section class="base-msg">
      <article class="wrap-box wui-border-tb case-msg">
         <w-field name="MetCity" v-model="MetCity" label-width="30" icon-width="100" height="40"  placeholder="开会城市" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='case-met-city-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb case-msg" style="padding: 0;">
        <h2 style="color: #005ba8;margin-bottom: 0;">讲者信息</h2>
      </article>
      <article class="wrap-box wui-border-tb case-msg">
         <w-field name="SpeakCity" v-model="SpeakCity" label-width="30" icon-width="100" height="40"  placeholder="城市" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='case-city-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb case-msg">
         <w-field name="SpeakHos" v-model="SpeakHos" label-width="30" icon-width="100" height="40"  placeholder="医院" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='case-hos-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
    </article>
      <article class="wrap-box wui-border-tb case-msg">
         <w-field name="SpeakDep" v-model="SpeakDep" label-width="30" icon-width="100" height="40"  placeholder="科室" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='case-dep-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb case-msg">
         <w-field name="SpeakPost" v-model="SpeakPost" label-width="30" icon-width="100" height="40"  placeholder="职务" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='case-post-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb case-msg">
         <w-field name="SpeakPhone" v-model="SpeakPhone" label-width="30" icon-width="100" height="40"  placeholder="手机号" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='case-phone-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb case-msg">
         <w-field name="SpeakContent" v-model="SpeakContent" label-width="30" icon-width="100" height="40"  placeholder="演讲课题" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='case-lesson-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb case-msg">
         <w-field name="SpeakTimePlan" v-model="SpeakTimePlan" label-width="30" icon-width="100" height="40"  placeholder="日程" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='case-date-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb case-msg">
         <w-field name="JoinCount" v-model="JoinCount" label-width="30" icon-width="100" height="40"  placeholder="人数" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='case-count-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
      </article>
      <article class="wrap-box wui-border-tb case-msg">
         <w-field name="SpeakRate" v-model="SpeakRate" label-width="30" icon-width="100" height="40"  placeholder="额度" class="inp-row">
            <w-row slot="label">
                <w-cell>
                   <i class='case-rate-icon'></i>
                </w-cell>
            </w-row>
         </w-field>
       </article>
    </section>
    <article class="padding-submit case-msg" style="padding-bottom: 5rem;">
        <w-button size="large" type="primary" :plain="plain" :bgColor="bgColor" fontColor="#ffffff" :block="isBlock" borderColor="borderColor" @click="addApply()">提 交</w-button>
    </article>
    <section class="case-menu">
        <apply-menu :tag="1"></apply-menu>
    </section>
  </section>
</template>

<script>
import { mapGetters, mapActions } from 'vuex';
import subTitle from '../../components/subTitle';
import applyMenu from '../../components/applyMenu';
export default {
    name: 'caseapply',
    props: {

    },
    data() {
        return {
            isBlock: true,
            bgColor: "#005ba8",
            plain: false,

            MetCity: '',
            SpeakCity: '',
            SpeakHos: '',
            SpeakDep: '',
            SpeakPost: '',
            SpeakPhone: '',
            SpeakContent: '',
            SpeakTimePlan: '',
            JoinCount: '',
            SpeakRate: ''
        }
    },
    components: {
      subTitle,
      applyMenu
    },
    methods: { 

        ...mapActions([
            'saveApply',
            'setLoading'
        ]),

       addApply: function() {
            if (this.MetCity.replace(/\s+$|^\s+/g, "") == '') {
                Wui.Toast.show('请输入开会城市', 'middle');
                return false;
            }
            if (this.SpeakCity.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入讲者城市', 'middle');
                    return false;
            }
            if (this.SpeakHos.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入讲者医院', 'middle');
                    return false;
            }
            if (this.SpeakDep.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入讲者科室', 'middle');
                    return false;
            }
            if (this.SpeakPost.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入讲者职位', 'middle');
                    return false;
            }
            if (this.SpeakPhone.replace(/\s+$|^\s+/g, "") == '' ||  !/^(1[0-9])\d{9}$/.test(this.SpeakPhone)) {
                    Wui.Toast.show('请输入讲者手机或手机号输入错误', 'middle');
                    return false;
            }
            if (this.SpeakContent.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入讲者课题', 'middle');
                    return false;
            }
            if (this.SpeakTimePlan.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入讲者日程', 'middle');
                    return false;
            }
            if (this.JoinCount.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入人数', 'middle');
                    return false;
            }
            if (this.SpeakRate.replace(/\s+$|^\s+/g, "") == '') {
                    Wui.Toast.show('请输入额度', 'middle');
                    return false;
            }
            let params = {
                MetCity: this.MetCity,
                SpeakCity: this.SpeakCity,
                SpeakHos: this.SpeakHos,
                SpeakDep: this.SpeakDep,
                SpeakPost: this.SpeakPost,
                SpeakPhone: this.SpeakPhone,
                SpeakContent: this.SpeakContent,
                SpeakTimePlan: this.SpeakTimePlan,
                JoinCount: this.JoinCount,
                SpeakRate: this.SpeakRate
            }

            this.setLoading(true);
            this.saveApply(params).then((res) => {
                this.setLoading(false);
                window.Wui.Toast.show('申请成功','middle');
                setTimeout(location.reload(), 1500);
            });
       }
    }
}
</script>

<style lang="scss" scoped>
   #case-apply-page {
       font-size: 0.5rem !important;
       i {
        //    width: 0.875rem;
        //    height: 0.875rem;
           width: 20px;
           height: 20px;
       }
       .case-met-city-icon {
           background: url('../../assets/img/case/meetcity.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-city-icon {
           background: url('../../assets/img/case/city.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-dep-icon {
           background: url('../../assets/img/case/dep.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-post-icon {
            background: url('../../assets/img/case/post.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-phone-icon {
            background: url('../../assets/img/case/phone.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-lesson-icon {
            background: url('../../assets/img/case/no.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-age-icon {
            background: url('../../assets/img/case/age.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-date-icon {
            background: url('../../assets/img/case/date.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-hos-icon {
            background: url('../../assets/img/case/hos.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-count-icon {
            background: url('../../assets/img/case/count.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-rate-icon {
            background: url('../../assets/img/case/rate.png') center no-repeat;
           background-size: 100% auto;
       }
       .case-msg {
           width: 90%;
           margin: 0 auto;
           padding: 0.3rem 0;
       }
   }
</style>